// !#1 引入 React 核心包
// import React from 'react'
// !#2 负责渲染的包（虚拟 DOM 转真实 DOM 并渲染）
import ReactDOM from 'react-dom/client'

// !#3 创建一个虚拟 DOM
const arr = [
  { id: 1, name: 'Vue' },
  { id: 2, name: 'React' },
  { id: 3, name: 'Angular' },
  { id: 4, name: 'Angular1111' },
]

/* const wrapEle = (
  <ul>
    <li>{arr[0].name}</li>
    <li>{arr[1].name}</li>
    <li>{arr[2].name}</li>
  </ul>
) */

// 和上面等价
/* const arrJsx = [
  <li key={arr[0].id}>{arr[0].name}</li>,
  <li key={arr[1].id}>{arr[1].name}</li>,
  <li key={arr[2].id}>{arr[2].name}</li>,
]
const wrapEle = <ul>{arrJsx}</ul> */

/* const arrJsx = arr.map((item) => <li key={item.id}>{item.name}</li>)
const wrapEle = <ul>{arrJsx}</ul> */

// 最外面的 '()' 表示换行需要加的，为了防止出现 JS 自动插入分号的 Bug
// key 是干啥的：React 内部进行 VNode Diff 的时候为了快速找到变更的那一个，按需更新，性能
const wrapEle = (
  <ul>
    {/* 外部的 '{}' 表示我要写表达式了 */}
    {/* arr.map() 就是一个表达式 */}
    {/* 注释 */}
    {arr.map((item) => (
      <li key={item.id}>
        <span>{item.name}</span>
      </li>
    ))}
  </ul>
)

// !#4 把虚拟 DOM 渲染到页面
// 渲染到哪儿、渲染谁
ReactDOM.createRoot(document.querySelector('#root')).render(wrapEle)
